import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


class OwlMusicPlus extends PolymerElement {

    constructor(){

        super();
        this.step=0.0;
        this.durationtime=0.0;
        this._isplay=false;
        this._isdown=false;
        this.readyoffset=0;
        this.targetWidth=0;
        this.conWidth=0;
        this.currentOffsetLeft=0;
        this.value=0.0;
        this.downX=0;
        this.ctrlBall=null;
        this.progBar=null;
        this.befIndex=-1;
        this.currentIndex=0;
        this.playType=0;//0 =>顺序播放  1=>单曲循环  2=>随机播放

        this._playEvent=this._play.bind(this);
        this._downEvent=this._conDown.bind(this);
        this._upEvent=this._conUp.bind(this);
        this._moveEvent=this._conMove.bind(this);
        this._outEvent=this._conOut.bind(this);
        this._timeUpdate=this.starPlaying.bind(this);
        this._selectMusicEvent=this._selectMusic.bind(this);
        this._beforeSong=this.beforeSong.bind(this);
        this._nextSong=this.nextSong.bind(this);
        this._jumpInfo=this.jumpInfo.bind(this);

    }

    connectedCallback(){

        super.connectedCallback();
        this.$._play.addEventListener("click",this._playEvent);
        this.$.conball.addEventListener("mousedown",this._downEvent);
        this.$.bef.addEventListener("click",this._beforeSong);
        this.$.nex.addEventListener("click",this._nextSong);
        this.$._poster.addEventListener("click",this._jumpInfo);

        let arr=[
            {imgsrc: "./owl-img/Aimer.jpg",musicname:"Hello sun",musicinfo:"the song for my cry",musicsrc:"./oiss.mp3"},
            {imgsrc: "./owl-img/poster.jpg",musicname:"So So ",musicinfo:"so happy in the end",musicsrc:"./owl.mp3"},
            {imgsrc: "./owl-img/bgsss.jpg",musicname:"may be you",musicinfo:"keep  in go",musicsrc:"./posi.mp3"},
            {imgsrc: "./owl-img/pos.jpg",musicname:"are you?",musicinfo:"how old about ",musicsrc:"./owl-s.mp3"},
            {imgsrc: "./owl-img/pos2.jpg",musicname:"may be you",musicinfo:"save me in other",musicsrc:"./owaal.mp3"},
            {imgsrc: "./owl-img/pos3.jpg",musicname:"Are ready",musicinfo:"how the wonder",musicsrc:"./oiss.mp3"},
            {imgsrc: "./owl-img/p5.jpg",musicname:"the help ",musicinfo:"the music info of",musicsrc:"./oiss.mp3"}
        ];

        this._setSrc(arr);
    }

    disconnectedCallback(){
        super.disconnectedCallback();

        this.$._play.removeEventListener("click",this._playEvent);
        this.$.conball.removeEventListener("mousedown",this._downEvent);
        this.$._item.removeEventListener("mousemove",this._moveEvent);
        this.$._item.removeEventListener("mouseup",this._upEvent);
        this.$._item.removeEventListener("mouseleave",this._outEvent);
        this.$._audio.removeEventListener("timeupdate",this._timeUpdate);

    }


    nextSong(){

        if(this.playType==0||this.playType==1){

            if(this.currentIndex!=this.musicList.length-1){

                this.befIndex=this.currentIndex;
                this.currentIndex=this.currentIndex+1;
                this.getMusicInfo(this.musicList[this.currentIndex].musicsrc);

            }else{

                this.getMusicInfo(this.musicList[0].musicsrc);
                this.befIndex=this.currentIndex;
                this.currentIndex=0;
            }

            this.$._poster.src=this.musicList[this.currentIndex].imgsrc;
            this.setSelect(this.currentIndex);
        }else {

            //随机播放的顺序

            let i= parseInt(Math.random()*(this.musicList.length-1).toString());



        }
    }

    beforeSong(){


        if(this.playType==0||this.playType==2){


            if(this.currentIndex==0){

                this.getMusicInfo(this.musicList[this.musicList.length-1].musicsrc);
                this.befIndex=this.currentIndex;
                this.currentIndex=this.musicList.length-1;

            }else{

                this.befIndex=this.currentIndex;
                this.currentIndex=this.currentIndex-1;
                this.getMusicInfo(this.musicList[this.currentIndex].musicsrc);
            }
            this.setSelect(this.currentIndex);
            this.$._poster.src=this.musicList[this.currentIndex].imgsrc;

        }else {

            //随机播放的顺序

        }

    }

    getMusicInfo(src){


        this.$._audio.src=src;
        let alltime=this.$._audio.duration;
        setTimeout(()=>{
            this.durationtime=this.$._audio.duration;
            this.step=this.targetWidth/this.durationtime;
            let dur =(this.durationtime/60).toFixed(2);
            let list=dur.toString().split(".");
            let number1="0";
            if(list[0].length<2){
                number1+=list[0];
            }
            // this.$.timer.innerText=number1+":"+list[1];
           console.log("the duration ="+this.durationtime);
        },1000);

        this.$.maxtitle.innerText=this._getDefaultName(src);
        if(this._isplay){

            this.$._audio.removeEventListener("timeupdate",this._timeUpdate);
            this._isplay=false;
        }
        this._play();



    }


    ready(){

        super.ready();
        this.$._poster.src=this.imgsrc;
        this.readyoffset=this.$.conball.offsetLeft;
        this.targetWidth=this.$.timel.clientWidth;
        this.conWidth=this.$.conball.clientWidth;
        this.ctrlBall=this.$.conball;
        this.progBar=this.$.prog;
        this.musicList=null;

         this.progBar.style.backgroundColor=this.progcolor;

         this.$.audioText.style.color=this.titlecolor;
        if(this.imgsrc!=""){

            this.$._poster.src=this.imgsrc;
        }

        if(this.audiosrc!="") {

            this.$._audio.src = this.audiosrc;
        }

        if(this.audiotitle!=""){

            this.$.audioText.innerText=this.audiotitle;
        }else if(this.audiosrc!=""){

            this.$.audioText.innerText=this._getDefaultName(this.audiosrc);
        }
    }

    static get properties() { return {

        imgsrc:{

            type:String,
            value:"",
        },
        audiosrc:{

            type:String,
            value:""
        },
        audiotitle:{

            type:String,
            value:""
        },
        loop:{

            type:String,
            value:"false"
        },
        progcolor:{

            type:String,
            value:"rgba(255,0,0,1)"
        },
        titlecolor:{

            type:String,
            value:"rgba(255,0,0,1)"
        }
    }};


    _conMove(e) {

        if (this._isdown) {

            let target = this.$.conball;
            let offset = e.clientX - this.downX;
            let targetoffset = this.currentOffsetLeft;
            //向左移动

            if (offset < 0) {

                if ((-offset) <= (this.downX-this.readyoffset+this.conWidth/2)) {

                    this.value= (this.downX-this.readyoffset) + offset;
                    target.style.marginLeft =this.value+ "px";
                    this._setStatusBar(this.value);
                }

            } else {

                if (offset <= (this.readyoffset + this.targetWidth - this.downX) -this.conWidth/2 ) {

                    this.value=(this.downX-this.readyoffset) +offset;
                    target.style.marginLeft = this.value+"px";
                    this._setStatusBar(this.value);
                }

            }
        }
    }


    _conDown(e){

      this._isdown=true;
      this.downX=e.clientX;
      this.currentOffsetLeft=this.$.conball.offsetLeft-this.readyoffset;
      this.$._item.addEventListener("mousemove",this._moveEvent,false);
      this.$._item.addEventListener("mouseup",this._upEvent,false);
      this.$._item.addEventListener("mouseleave",this._outEvent,false);

    }

    _conOut(){

        this._isdown=false;
    }
    _conUp(){
        this._isdown=false;
        let temper=(this.value/this.targetWidth)*((this.durationtime));
        // let temper=this.value*this.step;
        console.log("the all time ="+this.durationtime);
        console.log("the value ="+this.value);
        console.log("the current time = "+temper);
        this.$._audio.currentTime=temper.toFixed(4);

    }



    _play(){

        if(this._isplay){

            this.$._play.children[0].src="./owl-img/pl.png"
            this.$._audio.pause();
            this.$._audio.removeEventListener("timeupdate",this._timeUpdate);

        }else{

            this.$._play.children[0].src="./owl-img/pis.png"
            this.$._audio.play();
            this.$._audio.addEventListener("timeupdate",this._timeUpdate);
        }
        this._isplay=!this._isplay;
   }

   _setLineLineAudio(){

        let pos=this.$._audio.currentTime;
        let nextpos=pos*this.step;
        this._setStatusBar(nextpos);
        this._setControllBalFollowing(nextpos);
   }

   _setControllBalFollowing(value){

        this.ctrlBall.style.marginLeft=-5+value+"px";
   }
   _setTimeTextFollowing(value){


   }

    getLeftBtnNode(){

        return this.$._leftbtn;
    }


   getRightBtnNode(){

        return this.$._rightbtn;
   }

   _selectMusic(i){


        if(i!=this.befIndex) {
            this.currentIndex=i;
            let selectTarget = this.$.listbox.children[i];
            selectTarget.style.backgroundColor = "rgba(120,120,120,0.1)";

            this.$._poster.src=this.musicList[i].imgsrc;
            this.getMusicInfo(this.musicList[i].musicsrc);

            if (this.befIndex != (-1)) {

                let selectTarget = this.$.listbox.children[this.befIndex];
                selectTarget.style.backgroundColor = "rgba(255,255,255,1)";
                this.$._poster.src=this.musicList[i].imgsrc;
            }
            this.befIndex = i;
        }

   }

   setSelect(i){

       if(i!=this.befIndex) {

           this.currentIndex=i;
           let selectTarget = this.$.listbox.children[i];
           selectTarget.style.backgroundColor = "rgba(120,120,120,0.2)";

           if (this.befIndex != (-1)) {

               let selectTarget = this.$.listbox.children[this.befIndex];
               selectTarget.style.backgroundColor = "rgba(255,255,255,1)";
           }
           this.befIndex = i;
       }
   }


   jumpInfo(){


   this.$.jump.style.marginTop="-500px";


   }

   _getDefaultName(filename){

        let item=filename.split('/');
        return item[item.length-1].split(".")[0];
   }

   starPlaying(){

        this._setLineLineAudio();
   }


    _setStatusBar(value){

        this.progBar.style.width=value+"px";
    }

    _setSrc(obj){


        this.musicList=obj;
        let target=this.$.listbox;
        let its=this.$.listitem;
        its.children[0].src=obj[0].imgsrc;
        its.children[1].children[0].innerText=obj[0].musicname;
        its.children[1].children[1].innerText=obj[0].musicinfo;
        its.addEventListener("click",()=>{this._selectMusicEvent(0)});
        target.appendChild(its);

        for(let i=1;i<obj.length;i++){

            let it=this.$.listitem.cloneNode(true);
            it.children[0].src=obj[i].imgsrc;
            it.children[1].children[0].innerText=obj[i].musicname;
            it.children[1].children[1].innerText=obj[i].musicinfo;
            it.addEventListener("dblclick",()=>{this._selectMusicEvent(i)});
            target.appendChild(it);
        }
    }


    static get template() {
        return html`
             <style>
             
             
             .music_list{
               
               overflow: hidden;
               box-shadow: 0.2px 0.2px 4px 0.4px rgba(120,120,120,0.4);
               margin-top: 24px;
               width: 300px;
               border-radius: 8px;
               height: 500px;
               /*overflow: scroll;*/
               background-color: white;
     
             }
             
             ._header{
               
               width: 100%;
               height: 40px;
               background-color: white;
               border-top-left-radius: 8px;
               border-top-right-radius: 8px;
               /*box-shadow: 0px -0.6px 8px 2px rgba(120,120,120,1);*/
          
             }
             ._header img{
             
                width: 26px;
                height: 26px;
                margin-left: 8px;
                margin-top: 4px;
                
             
             }
             
             ._header img:active{
             
                 opacity: 0.7;
             }
             
               ._header img:last-child{
                  
                  margin-left: calc(100% - 72px);
               
               
               }             
       
             
            .list_box::-webkit-scrollbar {
               display: none;
          
             }

            .list_box{
            
            
                width: 100%;
                height: calc(100% - 120px);
                /*background-color: aquamarine;*/
                /*margin-left: 5%;*/
                overflow-x: hidden;
                position: relative;
                overflow-y: scroll;
                z-index: 100;
            }
            
            .kcl:active{
            
             opacity: 0.6;
             cursor: pointer;
            
            }

             .list_item{
             
               width: 100%;
               height: 60px;
               background-color:white;
               border-bottom: 0.5px solid rgba(120,120,120,0.9);
               display: flex;
             }
             
             .list_item img{
                margin-top: 5px;
                width: 50px;
                margin-left: 10px;
                height: 50px;
                border-radius: 8px;
             
             
             }
             .music_info{
               
                width: calc(100% - 50px - 32px);
                height: 50px;
                /*background-color: aqua;*/
                margin-top: 5px;
                margin-left: 8px;
            
             }
            .owl-music{
            
               width: 300px;
               /*margin-top: 12px;*/
               height: 80px;
               background-color: white;
               box-shadow: 0.2px 0.2px 4px 0.4px rgba(120,120,120,0.4);
               display: flex;
               border-bottom-left-radius: 8px;
               border-bottom-right-radius: 8px;
            
            }
            .owl-music-poster{
            
               width: 28%;
               height: 100%;
               /*background-color: aquamarine;*/
            
            }
            .owl-music-poster .poster{
                
                width: 80%;
                height: 80%;
                border-radius: 8px;
                position: relative;
                left: 50%;
                margin-top: 10%;
                margin-left: -40%;
                box-shadow: 0.2px 0.2px 4px 0.2px rgba(120,120,120,0.4);
         
            }
            
             .owl-music-poster .controller{
             
                width: 40px;
                height: 40px;
                position: relative;
                margin-top: -50px;
                margin-left: 20px;
                cursor: pointer;
             
             }
            .owl-music-controller{
            
               width: 78%;
               height: 100%;
               /*background-color: bisque;*/
              ;
               
      
            }
            .owl-music-title{
            
               width: 100%;
               height: 40%;
               /*background-color: yellow;*/
               margin-top: 5%;
            
            }
            
            .owl-music-timeline{
               width: 100%;
               height: 40%;
               /*background-color: aqua;*/
            }
            .owl-music-timeline .timeline{
            
               width: 90%;
               margin-left: 12px;
               height: 2px;
               background-color: rgba(120,120,120,0.5);
               display: inline-block;
               margin-top: 20px;
              
             
            }
               .owl-music-timeline .timeinfo{
               
                 width: 20%;
                 height: 20px;
                 /*background-color: yellow;*/
                 font-size: 0.6rem;
                 color: rgba(120,120,120,0.8);
                 padding-left: 8px;
               
               }
               .timeline .timeline-ball{
               
                 width: 10px;
                 height: 10px;
                 background-color: rgba(255,255,255,1);
                 box-shadow: 0.1px 0.1px 0.2px 2px rgba(120,120,120,0.5);
                 margin-top: -4px;
                 border-radius: 50%;
                 cursor: pointer;
                 margin-left: -5px;
                 position:relative ;
               
               }
               .timeline .prog{
                 width: 0px;
                 height: 100%;
                 background-color: red;
                 margin-top: -6px;
                 
               
               }
               
               .jumpinfo{
               
                 width:300px;
                 height: 500px;
                 border-radius: 8px;
                 background-color: rgba(255,255,255,1);
                 transition: all 0.2s ease-in;
                 position: relative;
                 z-index: 120;
               
               
               
               }
             
            </style>
            
            
            <div class="music_list">
                   
                   <div class="_header">
                     <img src="./owl-img/clos.png" id="_leftbtn">
                     <img src="./owl-img/sxc.png" id="_rightbtn">
                     
                   </div>
            
                <div class="list_box" id="listbox">
                
                   <div class="list_item" id="listitem">
                     <img src="./owl-img/Aimer.jpg">
                     
                     <div class="music_info">
                      <p style="padding-top: 6px;margin:0px;font-size: 15px">The Music Name</p>
                      <p style="margin:0px;font-size: 10px;color: rgba(120,120,120,0.8)">the music some info</p>
                     
                     </div>
                    </div>
            
                </div>
           
           <div class="owl-music" id="_item">
               <audio src="" id="_audio"  loop="false" hidden="false"></audio>
             <div class="owl-music-poster">
                <img class="poster" src="../star.png" id="_poster">
                <!--<img  class="controller" src="./owl-img/play.png"  style="opacity: 0">-->
             </div>
             
             <div class="owl-music-controller">
                <div class="owl-music-title" style="display: flex">
                <div style="width: 30%">
                
                <p style="font-size: 12px;margin: 0px" id="maxtitle">The PLay</p>
                 <p style="margin: 0px;padding-left: 0px;font-size: 0.8rem;color: #f573a0" id="audioText">蝶々結び--Aimer</p>
                  
                </div>
                
                <div style="display: flex;width: 70%;height: 100%;margin-top: 6px">
                
                <div id="bef" class="kcl" style="width: 30px;height: 30px;background-color: rgba(235,121,128,0.8);border-radius: 50%;margin-left: 18px;margin-right: 12px" >
                   <img  src="./owl-img/bef.png" style="width: 18px;height: 18px;position: relative;left: 50%;margin-left: -9px;margin-top: 6px">
                 </div>
                 <div  id="_play" class="kcl" style="margin-top: -2px;width: 34px;height: 34px;background-color: rgba(235,121,128,0.8);border-radius: 50%" >
                  <img  src="./owl-img/pl.png" style="width: 18px;height: 18px;position: relative;left: 50%;margin-left: -8px;margin-top: 8px">
                 </div>
                  <div id="nex"  style="width: 30px;height: 30px;background-color: rgba(235,121,128,0.8);border-radius: 50%;margin-left: 12px;margin-right: 4px"  class="kcl">
                  
                   <img  src="./owl-img/nex.png" style="width: 18px;height: 18px;position: relative;left: 50%;margin-left: -9px;margin-top: 6px">
                </div>
                     
                </div>
                </div>
                <div class="owl-music-timeline">
                <div style="width: 100%;display: flex">
                   <div class="timeline" id="timel">
             
                       <div class="timeline-ball" id="conball"></div>
                             <div class="prog" id="prog"></div>
                       
                    </div>
                   <!--<div class="timeinfo" id="timer">00:00</div>-->
                 </div>
                   
                 </div>
             </div>
           </div>
           
           
           <div class="jumpinfo" id="jump">
           
              
           
           
          
           </div>
         
           </div>
        
        `;
    }

}
customElements.define("owl-music-plus",OwlMusicPlus);


